import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { BarsOutlined } from '@ant-design/icons'
import { TTable } from '@/components'

import styles from './Home.module.less'

function Home({
  pState,
  fetchTable0,
  setupPage0,
  fetchTable1,
  setupPage1,
}: PagePropsType) {
  const { list0, total0, pageState0, list1, total1, pageState1 } = pState

  useEffect(() => {
    fetchTable0(pageState0)
  }, [fetchTable0, pageState0])
  useEffect(() => {
    fetchTable1(pageState1)
  }, [fetchTable1, pageState1])

  const columns = [
    {
      title: '工单号',
      dataIndex: 'No',
      width: 150,
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '改进措施',
      dataIndex: 'measures',
      width: 150,
    },
    {
      title: '改进责任人',
      dataIndex: 'person',
    },
    {
      title: '计划完成时间',
      dataIndex: 'date',
    },
    {
      title: '停留目的',
      dataIndex: 'purpose',
      width: 150,
    },
  ]

  const table0Props: any = {
    rowKey: 'uid',
    dataSource: list0,
    columns: columns,
    pagination: {
      current: pageState0.page,
      pageSize: pageState0.pageSize,
      total: total0,
      onChange(page: number, pageSize: number) {
        if (pageSize === pageState0.pageSize) {
          setupPage0({ page })
        } else {
          setupPage0({ page: 1, pageSize })
        }
      },
    },
  }

  const table1Props: any = {
    rowKey: 'uid',
    dataSource: list1,
    columns: columns,
    pagination: {
      current: pageState1.page,
      pageSize: pageState1.pageSize,
      total: total1,
      onChange(page: number, pageSize: number) {
        if (pageSize === pageState1.pageSize) {
          setupPage1({ page })
        } else {
          setupPage1({ page: 1, pageSize })
        }
      },
    },
  }

  return (
    <div className={`g_page ${styles.page}`}>
      <section className={styles.section}>
        <div className={styles.title}>
          <BarsOutlined style={{ color: '#3A84FB', fontSize: 20 }} />
          &nbsp;&nbsp; 我的待办工单
        </div>
        <TTable {...table0Props} />
        <div className={styles.more}>更多&gt;&gt;</div>
      </section>
      <section className={styles.section} style={{ marginTop: 40 }}>
        <div className={styles.title}>
          <BarsOutlined style={{ color: '#3A84FB', fontSize: 20 }} />
          &nbsp;&nbsp; 我的已办工单
        </div>
        <TTable {...table1Props} />
        <div className={styles.more}>更多&gt;&gt;</div>
      </section>
    </div>
  )
}

export default connect(
  (state: any) => ({
    pState: state.homeState,
  }),
  (dispatch) => ({
    fetchTable0: (pageInfo: pageType) =>
      dispatch({ type: 'HOME/fetchTable0', payload: pageInfo }),
    setupPage0: (pageInfo: pageType) =>
      dispatch({ type: 'HOME/setupPage0', payload: pageInfo }),
    fetchTable1: (pageInfo: pageType) =>
      dispatch({ type: 'HOME/fetchTable1', payload: pageInfo }),
    setupPage1: (pageInfo: pageType) =>
      dispatch({ type: 'HOME/setupPage1', payload: pageInfo }),
  }),
)(Home)
